<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>朋克按钮</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			display: flex;
			justify-content: center;
			background: black;
		}

		.a {
			position: relative;
			top: 180px;
			width: 500px;
			height: 120px;
			border: 10px solid #fff;
			box-shadow: 0 0 70px rgb(190, 40, 210);
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}

		.a::after {
			content: "";
			position: absolute;
			width: 500px;
			height: 120px;
			box-shadow: 0 0 5px rgba(190, 40, 210);
			background: rgba(100, 30, 225, .4);
		}

		.a:hover {
			animation: o 1.5s infinite;
		}

		@keyframes o {

			0%,
			34%,
			68%,
			100% {
				border: 10px solid rgb(130, 0, 150);
				box-shadow: 0 0 70px rgb(125, 0, 141);
			}

			17%,
			51%,
			85% {
				border: 10px solid rgba(255, 0, 0, .5);
				box-shadow: 0 0 90px rgba(255, 0, 0, .8);
			}
		}

		.b,
		.b::before {
			color: #fff;
			z-index: 999;
			position: absolute;
			font-size: 65px;
			font-weight: 900;
			/*			字间距*/
			letter-spacing: 12px;
		}

		.b::before {
			content: "LOVE/YOU";
			text-shadow: -5px -5px 0px rgb(211, 250, 9), 5px 5px 0px rgb(25, 10, 24);
			/*			使用缩放的方式创建可见显示剩余 括号内是上右下左*/
			clip-path: inset(100% 0px 0px 0px);
		}

		.a:hover .b::before {
			/*			steps设置逐帧动画 值越小越卡顿*/
			animation: move 1.5s steps(2) infinite;
		}

		@keyframes move {
			0% {
				clip-path: inset(80% 0px 0px 0px);
				transform: translate(-20px, -10px)
			}

			10% {
				clip-path: inset(10% 0px 85% 0px);
				transform: translate(10px, 10px)
			}

			20% {
				clip-path: inset(80% 0px 0px 0px);
				transform: translate(-10px, 10px)
			}

			30% {
				clip-path: inset(10% 0px 85% 0px);
				transform: translate(0px, 5px)
			}

			40% {
				clip-path: inset(50% 0px 30% 0px);
				transform: translate(-5px, 0px)
			}

			50% {
				clip-path: inset(50% 0px 30% 0px);
				transform: translate(5px, 0px)
			}

			60% {
				clip-path: inset(40% 0px 30% 0px);
				transform: translate(5px, 10px)
			}

			70% {
				clip-path: inset(50% 0px 30% 0px);
				transform: translate(-10px, 10px)
			}

			80% {
				clip-path: inset(80% 0px 5% 0px);
				transform: translate(20px, 10px)
			}

			90% {
				clip-path: inset(80% 0px 0px 0px);
				transform: translate(-10px, 0px)
			}

			100% {
				clip-path: inset(80% 0px 0px 0px);
				transform: translate(0px, 0px)
			}
		}


		/* 第二种 ----------------------背景需要设置成黑色----------------*/
		.content {
			position: absolute;
			top: 20%;
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.content .text {
			position: relative;
			color: #fff;
			font-weight: 700;
			font-size: 45px;
			text-transform: uppercase;
			transform: scale(2);
			letter-spacing: 2px;
			padding: 30px;
		}

		.content .text::before,
		.content .text::after {
			position: absolute;
			content: attr(data-text);
			padding: 30px;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: #000;
			color: #fff;
			overflow: hidden;
		}

		.content .text::before {
			left: 3px;
			text-shadow: -5px 0 red;
			animation: glitch-1 2s 0s linear reverse infinite;
		}

		.content .text::after {
			left: -3px;
			text-shadow: -5px 0 blue;
			animation: glitch-2 2s 0s linear reverse infinite;
		}

		@keyframes glitch-1 {
			0% {
				clip: rect(132px, 350px, 101px, 30px);
			}

			5% {
				clip: rect(17px, 350px, 94px, 30px);
			}

			10% {
				clip: rect(40px, 350px, 66px, 30px);
			}

			15% {
				clip: rect(87px, 350px, 82px, 30px);
			}

			20% {
				clip: rect(137px, 350px, 61px, 30px);
			}

			25% {
				clip: rect(34px, 350px, 14px, 30px);
			}

			30% {
				clip: rect(133px, 350px, 74px, 30px);
			}

			35% {
				clip: rect(76px, 350px, 107px, 30px);
			}

			40% {
				clip: rect(59px, 350px, 130px, 30px);
			}

			45% {
				clip: rect(29px, 350px, 84px, 30px);
			}

			50% {
				clip: rect(22px, 350px, 67px, 30px);
			}

			55% {
				clip: rect(67px, 350px, 62px, 30px);
			}

			60% {
				clip: rect(10px, 350px, 105px, 30px);
			}

			65% {
				clip: rect(78px, 350px, 115px, 30px);
			}

			70% {
				clip: rect(105px, 350px, 13px, 30px);
			}

			75% {
				clip: rect(15px, 350px, 75px, 30px);
			}

			80% {
				clip: rect(66px, 350px, 39px, 30px);
			}

			85% {
				clip: rect(133px, 350px, 73px, 30px);
			}

			90% {
				clip: rect(36px, 350px, 128px, 30px);
			}

			95% {
				clip: rect(68px, 350px, 103px, 30px);
			}

			100% {
				clip: rect(14px, 350px, 100px, 30px);
			}
		}

		@keyframes glitch-2 {
			0% {
				clip: rect(129px, 350px, 36px, 30px);
			}

			5% {
				clip: rect(36px, 350px, 4px, 30px);
			}

			10% {
				clip: rect(85px, 350px, 66px, 30px);
			}

			15% {
				clip: rect(91px, 350px, 91px, 30px);
			}

			20% {
				clip: rect(148px, 350px, 138px, 30px);
			}

			25% {
				clip: rect(38px, 350px, 122px, 30px);
			}

			30% {
				clip: rect(69px, 350px, 54px, 30px);
			}

			35% {
				clip: rect(98px, 350px, 71px, 30px);
			}

			40% {
				clip: rect(146px, 350px, 34px, 30px);
			}

			45% {
				clip: rect(134px, 350px, 43px, 30px);
			}

			50% {
				clip: rect(102px, 350px, 80px, 30px);
			}

			55% {
				clip: rect(119px, 350px, 44px, 30px);
			}

			60% {
				clip: rect(106px, 350px, 99px, 30px);
			}

			65% {
				clip: rect(141px, 350px, 74px, 30px);
			}

			70% {
				clip: rect(20px, 350px, 78px, 30px);
			}

			75% {
				clip: rect(133px, 350px, 79px, 30px);
			}

			80% {
				clip: rect(78px, 350px, 52px, 30px);
			}

			85% {
				clip: rect(35px, 350px, 39px, 30px);
			}

			90% {
				clip: rect(67px, 350px, 70px, 30px);
			}

			95% {
				clip: rect(71px, 350px, 103px, 30px);
			}

			100% {
				clip: rect(83px, 350px, 40px, 30px);
			}
		}
	</style>
</head>

<body>
	<div class="a">
		<div class="b"><span>LOVE/YOU</span></div>
	</div>

	<!-- 第二种 -->
	<div class="content">
		<div class="text" data-text="Text Glitch">Text Glitch</div>
	</div>
</body>

</html>